<template>
  <div class="w-[1150px] p-6 relative bg-white h-full print-style">
    <div class="flex justify-between w-full text-center items-center">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
    </div>
    <div class="text-center text-[22px] font-bold">长期医嘱单</div>
    <div v-for="(item, index) in tableData" :key="index" class="flex-1 mt-6 text-xl">
      <div class="flex items-center justify-between">
        <div class="w-[200px]">床位：{{ item.bedCode }}</div>
        <div class="w-[230px]">姓名：{{ item.brName }} {{ item.brXb }} {{ item.brAge }}</div>
        <div class="w-[200px]">住院号：{{ item.inplsh }}</div>
        <BaseBarcode :value="item.inplsh" :height="40" class="mb-4" />
      </div>
      <div class="print-table">
        <div class="flex w-full">
          <div class="print-table-item w-[60px]">类别</div>
          <div class="print-table-item w-[60px]">变更</div>
          <div class="print-table-item w-[130px]">变更时间</div>
          <div class="print-table-item w-[100px]">变更医生</div>
          <div class="print-table-item flex-1">医嘱内容</div>
          <div class="print-table-item w-[60px]">数量</div>
          <div class="print-table-item w-[60px]">单位</div>
          <div class="print-table-item w-[90px]">频次</div>
          <div class="print-table-item w-[120px]">规格</div>
          <div class="print-table-item w-[120px]">医生说明</div>
        </div>
        <div v-for="(itemRow, indexRow) in item.items" :key="indexRow" class="flex w-full">
          <div class="print-table-item w-[60px]">{{ itemRow.advExecType }}</div>
          <div class="print-table-item w-[60px]">{{ itemRow.advChgType }}</div>
          <div class="print-table-item w-[130px]">{{ itemRow.advChgTimeStr }}</div>
          <div class="print-table-item w-[100px]">{{ itemRow.advChgDoctorName }}</div>
          <div class="print-table-item flex-1">{{ itemRow.advName }}</div>
          <div class="print-table-item w-[60px]">{{ itemRow.clinicalDose }}</div>
          <div class="print-table-item w-[60px]">{{ itemRow.clinicalDoseUnit }}</div>
          <div class="print-table-item w-[90px]">{{ itemRow.fqyCode }}</div>
          <div class="print-table-item w-[120px]">{{ itemRow.spc }}</div>
          <div class="print-table-item w-[120px]">{{ itemRow.advMemo }}</div>
        </div>
      </div>
    </div>
    <div class="flex justify-between mt-5">
      <div>核对人：{{ empName }}</div>
      <div>核对时间：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { getSystemConfig } from '@/utils/systemConfig'
import useUserStore from '@/store/user'

const { empName } = useUserStore()

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const tableData = ref([])

watch(
  () => props.printData,
  () => {
    // 使用 reduce 方法来分组对象
    if (props.printData?.printData?.detail.length) {
      tableData.value = props.printData.printData.detail.reduce((acc, item) => {
        const existingGroup = acc.find((group) => group.brId === item.brId)
        if (existingGroup) {
          existingGroup.items.push(item)
        } else {
          acc.push({
            brId: item.brId,
            wardName: item.wardName,
            bedCode: item.bedCode,
            brName: item.brName,
            brXb: item.brXb,
            brAge: item.brAge,
            inplsh: item.inplsh,
            items: [item]
          })
        }

        return acc
      }, [])
    }
  }
)
</script>
<style lang="less" scoped></style>
